<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button v-permission="['管理客户']" class="filter-item" type="primary" icon="el-icon-plus" size="mini">
        <router-link :to="{name:'customerAdd'}">{{ $t('table.add') }}</router-link>
      </el-button>
    </div>
    <el-table
      v-loading="loading"
      :data="list"
      stripe
      style="width: 100%"
    >
      <el-table-column
        prop="id"
        label="编号"
        width="50"
      />
      <el-table-column
        prop="advertiser"
        label="客户名称"
        width="180"
      />
      <el-table-column
        prop="contacts_name"
        label="联系人"
      />
      <el-table-column
        prop="contacts_tel"
        label="联系人电话"
      />
      <el-table-column
        prop="recharge"
        label="充值"
      />
      <el-table-column
        prop="back_money"
        label="回款"
      />
      <el-table-column
        prop="invoice"
        label="发票"
      />
      <el-table-column
        label="提交人"
      >
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>

      <el-table-column
        align="right"
      >
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"
            @change="getList(1)"
          />
        </template>
        <template slot-scope="scope">
          <el-button size="mini" round><svg-icon icon-class="clipboard" /><router-link :to="{name:'contractAdd',query:{adname:scope.row.advertiser,id:scope.row.id}}">  合同</router-link></el-button>
          <el-button
            size="mini"
            type="danger"
            round
            @click="handleDelete(scope.$index, scope.row)"
          >Delete</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="filter-container" style="margin-top: 20px;">
      <el-pagination
        background
        :page-size="per_page"
        layout="prev, pager, next"
        :current-page="page"
        :total="total"
        @current-change="getList"
      />
    </div>

  </div>
</template>

<script>
import Resource from '@/api/resource';
import permission from '@/directive/permission';
const customerResource = new Resource('customer');
export default {
  name: 'List',
  directives: { permission },
  data() {
    return {
      list: [],
      loading: true,
      total: 0,
      per_page: 0,
      page: 1,
      search: '',
    };
  }, created() {
    this.getList();
  }, methods: {
    async getList(page){
      this.page = page;
      this.loading = true;

      const { data, meta } = await customerResource.list({ page: this.page, search: this.search, media: 1 });
      this.total = meta.total;
      this.per_page = meta.per_page;
      this.list = data;
      this.loading = false;
    },
  },
};
</script>

<style scoped>

</style>
